import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Link ,browserHistory} from 'react-router';

import {message,Row,Col,Card,Input,Button} from 'antd';
import NavBar from '../common/NavBar';
import ContentBody from '../common/ContentBody';
import Viewer from 'react-viewer';
//导入常量
import {APPROVE_STATUS} from '../constants/index';

export default class LoanDetail extends React.Component {
  constructor(props, context){
      super(props, context);
      this.state={
      };
  }

  componentWillMount(){

  }

  componentDidUpdate() {

  }
  viewImage(index){
    this.setState({
      visible:true,
      activeIndex:index
    })
  }

  render() {
    let {data} = this.props;
    let imageUrls =  [];
    return (
        <div>
          <Card title="借款信息" >
            <div className='block-detail-container'>
              <div className='d-row'>
                <div className='d-col'>
                    <label>借款金额</label>
                    <div>{data.amount}元</div>
                </div>
                <div className='d-col'>
                    <label>借款期限</label>
                    <div>{data.periods}个月</div>
                </div>
              </div>
              <div className='d-row'>
                <div className='d-col'>
                    <label>年化利率</label>
                    <div>{data.annual_rate}%</div>
                </div>
                <div className='d-col'>
                    <label>还款日期</label>
                    <div>{data.repayment_date}</div>
                </div>
              </div>
              <div className='d-row'>
                <div className='d-col'>
                    <label>筹款周期</label>
                    <div>{data.fund_total_days}天</div>
                </div>
                <div className='d-col'>
                    <label>申请时间</label>
                    <div>{data.created_at}</div>
                </div>
              </div>
            </div>
          </Card>
          <div className='height20'></div>
          <Card title="借款人信息" >
            <div className='block-detail-container'>
              <div className='d-row'>
                <div className='d-col'>
                    <label>借款人姓名</label>
                    <div>{data.borrower_name}</div>
                </div>
                <div className='d-col'>
                    <label>借款人手机号</label>
                    <div>{data.borrower_phone}</div>
                </div>
              </div>
              <div className='d-row'>
                <div className='d-col'>
                    <label>借款人身份证号</label>
                    <div>{data.borrower_id_card}</div>
                </div>
                <div className='d-col'>
                    <label>与患者关系</label>
                    <div>{data.patient_relation}</div>
                </div>
              </div>
              <div className='d-row'>
                {((data.bicPictures||[]).slice(0,2)||[]).map((item,index)=>{
                  imageUrls.push({src:item.url,alt:''})
                  return (
                    <div className='d-col' key={index}>
                        <label>{item.type==1?'身份证正面':item.type==2?'身份证反面':'手持身份证'}</label>
                        <div  onClick={this.viewImage.bind(this,imageUrls.length-1)}>
                          <img  src={item.url} alt={item.descr} />
                        </div>
                    </div>
                  )
                })}
                {/*<div className='d-col'>
                    <label>身份证正面</label>
                    <div >
                      <img  src='http://www.fjsen.com/images/attachement/jpg/site2/20100702/001a803afa830d97994f58.jpg' />
                    </div>
                </div>
                <div className='d-col'>
                    <label>身份证反面</label>
                    <div>
                      <img  src='http://www.fjsen.com/images/attachement/jpg/site2/20100702/001a803afa830d97994f58.jpg' />
                    </div>
                </div>*/}
              </div>

              <div className='d-row'>
                {((data.bicPictures||[]).slice(2,3)||[]).map((item,index)=>{
                  imageUrls.push({src:item.url,alt:''})
                  return (
                    <div className='d-col' key={index}>
                        <label>{item.type==1?'身份证正面':item.type==2?'身份证反面':'手持身份证'}</label>
                        <div onClick={this.viewImage.bind(this,imageUrls.length-1)}>
                          <img  src={item.url} alt={item.descr} />
                        </div>
                    </div>
                  )
                })}
              </div>
                
            </div>
          </Card>
          <div className='height20'></div>
          <Card title="患者信息" >
            <div className='block-detail-container'>
              <div className='d-row'>
                <div className='d-col'>
                    <label>患者姓名</label>
                    <div>{data.patient_name}</div>
                </div>
                <div className='d-col'>
                    <label>所患疾病</label>
                    <div>{data.disease}</div>
                </div>
              </div>
              <div className='d-row'>
                <div className='d-col'>
                    <label>筹款标题</label>
                    <div>{data.title}</div>
                </div>
              </div>
              <div className='d-row'>
                <div className='d-col'>
                    <label>筹款原因</label>
                    <div>
                      {data.reason}
                    </div>
                </div>
              </div>
              <div className='d-row'>
                <div className='d-col'>
                    <label>图片材料</label>
                    <div className='flex'>
                      {(data.resourcePictures||[]).map((item,index)=>{
                        imageUrls.push({src:item.url,alt:''})
                        return (
                          <a key={index} href={'javascript:void 0;'} type="text/html" onClick={this.viewImage.bind(this,imageUrls.length-1)}  className={index>0?'marginL20':''}>
                            <img  src={item.url} alt={item.descr} />
                          </a>
                        )
                      })}
                      
                      {/*<a className='marginL20'>
                        <img  src='http://www.fjsen.com/images/attachement/jpg/site2/20100702/001a803afa830d97994f58.jpg' />
                      </a>
                      <a className='marginL20'>
                        <img  src='http://www.fjsen.com/images/attachement/jpg/site2/20100702/001a803afa830d97994f58.jpg' />
                      </a>
                      <a className='marginL20'>
                        <img  src='http://www.fjsen.com/images/attachement/jpg/site2/20100702/001a803afa830d97994f58.jpg' />
                      </a>
                      <a className='marginL20'>
                        <img  src='http://www.fjsen.com/images/attachement/jpg/site2/20100702/001a803afa830d97994f58.jpg' />
                      </a>*/}
                    </div>
                </div>
              </div>
            </div>
          </Card>
          <div className='height20'></div>
          <Card title="审批意见" >
            <div className='block-detail-container'>
              {(data.check_suggestions||[]).map((item,index)=>{
                return (
                  <div className={'d-row '+(index>0?'marginT10':'')} key={index}>
                    <div className='d-col'>
                        <label>审批意见<span style={{color:(item.status==0?'red':'')}}>({APPROVE_STATUS[item.status]})</span>:</label>
                        <div>
                          <div className='flex space-between' >
                            
                            <span>{item.create_at}</span>
                          </div>
                          <div className='marginT5' style={{textIndent:'2em'}}>{item.check_suggestion}</div>
                        </div>
                    </div>
                  </div>
                )
              })}
              {/*<div className='d-row'>
                <div className='d-col'>
                    <label>审批意见<span style={{color:'red'}}>(驳回)</span>:</label>
                    <div>
                      <div className='flex space-between' >
                        
                        <span>2017-09-09 22:10</span>
                      </div>
                      <div className='marginT5' style={{textIndent:'2em'}}>这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长。</div>
                    </div>
                </div>
              </div>
              <div className='d-row marginT10'>
                <div className='d-col'>
                    <label>审批意见<span style={{color:'red'}}>(驳回)</span>:</label>
                    <div>
                      <div className='flex space-between' >
                        
                        <span>2017-09-09 22:10</span>
                      </div>
                      <div className='marginT5' style={{textIndent:'2em'}}>这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长。</div>
                    </div>
                </div>
              </div>
              <div className='d-row marginT10'>
                <div className='d-col'>
                    <label>审批意见<span style={{color:'red'}}>(驳回)</span>:</label>
                    <div>
                      <div className='flex space-between' >
                        
                        <span>2017-09-09 22:10</span>
                      </div>
                      <div className='marginT5' style={{textIndent:'2em'}}>这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长，这一段是原有，原有内容会很长。</div>
                    </div>
                </div>
              </div>*/}
            </div>
          </Card>
          <Viewer
            visible={this.state.visible}
            onClose={() => { this.setState({ visible: false }); } }
            activeIndex={this.state.activeIndex}
            images={imageUrls}
          />
        </div>
    )
  }
}
LoanDetail.contextTypes= { router: React.PropTypes.object.isRequired};

